<!-- <script src="/aifish/common/check.pjax.js"></script> -->
<article>
    <div class="toc-affix" style="width: 90px; height: 150px;">
        <div class="ant-affix" >
            <ul class="toc demos-anchor">
                <li><a href="#src-components-Button-demo-primary"></a></li>
            </ul>
        </div>
    </div>
    <section class="markdown">
        <h1>BasicForm基础表单</h1>
        <section class="markdown">
            <p></p>
            <h2 id="何时使用"><span>何时使用</span><a href="#何时使用" class="anchor">#</a></h2>
        </section>
        <h2>代码演示<i class="code-box-expand-trigger anticon anticon-appstore" title="展开全部代码"></i></h2></section>
    <div class="ant-row" style="margin-left: -8px; margin-right: -8px;">
        <div class="ant-col-12 code-boxes-col-2-1" style="padding-left: 8px; padding-right: 8px;">
            <section class="code-box expand" id="">
                <section id="J_vue_4g5l7z4b1t6" class="code-box-demo">
                    <div>
<div class="box box-primary">
    <div class="box-header with-border">
        <h3 class="box-title">Quick Example</h3>
    </div>
    <form role="form">
        <div class="box-body">
            <div class="form-group">
                <label for="exampleInputEmail1">Email address</label>
                <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Enter email">
            </div>
            <div class="form-group">
                <label for="exampleInputPassword1">Password</label>
                <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
            </div>
            <div class="form-group">
                <label for="exampleInputFile">File input</label>
                <input type="file" id="exampleInputFile">
                <p class="help-block">Example block-level help text here.</p>
            </div>
            <div class="checkbox">
                <label>
                    <input type="checkbox"> Check me out
                </label>
            </div>
        </div>
        <div class="box-footer">
            <button type="submit" class="btn btn-primary">Submit</button>
        </div>
    </form>
</div>
                    </div>
                </section>
                <section class="code-box-meta markdown">
                    <div class="code-box-title"><a href="#src-components-Button-demo-primary">默认样式</a></div>
                    <div>
                         <p></p>
                    </div>
                    <span class="collapse anticon anticon-circle-o-right" ></span>
                </section>
                <section class="highlight-wrapper highlight-wrapper-expand">
                    <div class="highlight">
                        <pre class="language-xml">
<code >&lt;div class=&quot;box box-primary&quot;&gt;
    &lt;div class=&quot;box-header with-border&quot;&gt;
        &lt;h3 class=&quot;box-title&quot;&gt;Quick Example&lt;/h3&gt;
    &lt;/div&gt;
    &lt;form role=&quot;form&quot;&gt;
        &lt;div class=&quot;box-body&quot;&gt;
            &lt;div class=&quot;form-group&quot;&gt;
                &lt;label for=&quot;exampleInputEmail1&quot;&gt;Email address&lt;/label&gt;
                &lt;input type=&quot;email&quot; class=&quot;form-control&quot; id=&quot;exampleInputEmail1&quot; placeholder=&quot;Enter email&quot;&gt;
            &lt;/div&gt;
            &lt;div class=&quot;form-group&quot;&gt;
                &lt;label for=&quot;exampleInputPassword1&quot;&gt;Password&lt;/label&gt;
                &lt;input type=&quot;password&quot; class=&quot;form-control&quot; id=&quot;exampleInputPassword1&quot; placeholder=&quot;Password&quot;&gt;
            &lt;/div&gt;
            &lt;div class=&quot;form-group&quot;&gt;
                &lt;label for=&quot;exampleInputFile&quot;&gt;File input&lt;/label&gt;
                &lt;input type=&quot;file&quot; id=&quot;exampleInputFile&quot;&gt;
                &lt;p class=&quot;help-block&quot;&gt;Example block-level help text here.&lt;/p&gt;
            &lt;/div&gt;
            &lt;div class=&quot;checkbox&quot;&gt;
                &lt;label&gt;
                    &lt;input type=&quot;checkbox&quot;&gt; Check me out
                &lt;/label&gt;
            &lt;/div&gt;
        &lt;/div&gt;
        &lt;div class=&quot;box-footer&quot;&gt;
            &lt;button type=&quot;submit&quot; class=&quot;btn btn-primary&quot;&gt;Submit&lt;/button&gt;
        &lt;/div&gt;
    &lt;/form&gt;
&lt;/div&gt;</code></pre>
                    </div>
                </section>
            </section>
            <section class="code-box" id="src-components-Button-demo-tertiary">
                <section id="J_vue_iw3mdfv42u" class="code-box-demo">
                    <div>
<div class="box box-info">
    <div class="box-header with-border">
        <h3 class="box-title">Horizontal Form</h3>
    </div>
    <form class="form-horizontal">
        <div class="box-body">
            <div class="form-group">
                <label for="inputEmail3" class="col-sm-2 control-label">Email</label>
                <div class="col-sm-10">
                    <input type="email" class="form-control" id="inputEmail3" placeholder="Email">
                </div>
            </div>
            <div class="form-group">
                <label for="inputPassword3" class="col-sm-2 control-label">Password</label>
                <div class="col-sm-10">
                    <input type="password" class="form-control" id="inputPassword3" placeholder="Password">
                </div>
            </div>
            <div class="form-group">
                <div class="col-sm-offset-2 col-sm-10">
                    <div class="checkbox">
                        <label>
                            <input type="checkbox"> Remember me
                        </label>
                    </div>
                </div>
            </div>
        </div>
        <div class="box-footer">
            <button type="submit" class="btn btn-default">Cancel</button>
            <button type="submit" class="btn btn-info pull-right">Sign in</button>
        </div>
    </form>
</div>
                    </div>
                </section>
                <section class="code-box-meta markdown">
                    <div class="code-box-title"><a href="#src-components-Button-demo-tertiary">块级按钮</a></div>
                    <div>
                        <p>
                            添加<code>.btn-block</code>，让按钮进行块级显示。
                        </p>
                    </div><span class="collapse anticon anticon-circle-o-right" unselectable="none"></span></section>
                <section class="highlight-wrapper highlight-wrapper-expand">
                    <div class="highlight">
                        <pre class="language-xml">
<code>&lt;div class=&quot;box box-info&quot;&gt;
    &lt;div class=&quot;box-header with-border&quot;&gt;
        &lt;h3 class=&quot;box-title&quot;&gt;Horizontal Form&lt;/h3&gt;
    &lt;/div&gt;
    &lt;form class=&quot;form-horizontal&quot;&gt;
        &lt;div class=&quot;box-body&quot;&gt;
            &lt;div class=&quot;form-group&quot;&gt;
                &lt;label for=&quot;inputEmail3&quot; class=&quot;col-sm-2 control-label&quot;&gt;Email&lt;/label&gt;
                &lt;div class=&quot;col-sm-10&quot;&gt;
                    &lt;input type=&quot;email&quot; class=&quot;form-control&quot; id=&quot;inputEmail3&quot; placeholder=&quot;Email&quot;&gt;
                &lt;/div&gt;
            &lt;/div&gt;
            &lt;div class=&quot;form-group&quot;&gt;
                &lt;label for=&quot;inputPassword3&quot; class=&quot;col-sm-2 control-label&quot;&gt;Password&lt;/label&gt;
                &lt;div class=&quot;col-sm-10&quot;&gt;
                    &lt;input type=&quot;password&quot; class=&quot;form-control&quot; id=&quot;inputPassword3&quot; placeholder=&quot;Password&quot;&gt;
                &lt;/div&gt;
            &lt;/div&gt;
            &lt;div class=&quot;form-group&quot;&gt;
                &lt;div class=&quot;col-sm-offset-2 col-sm-10&quot;&gt;
                    &lt;div class=&quot;checkbox&quot;&gt;
                        &lt;label&gt;
                            &lt;input type=&quot;checkbox&quot;&gt; Remember me
                        &lt;/label&gt;
                    &lt;/div&gt;
                &lt;/div&gt;
            &lt;/div&gt;
        &lt;/div&gt;
        &lt;div class=&quot;box-footer&quot;&gt;
            &lt;button type=&quot;submit&quot; class=&quot;btn btn-default&quot;&gt;Cancel&lt;/button&gt;
            &lt;button type=&quot;submit&quot; class=&quot;btn btn-info pull-right&quot;&gt;Sign in&lt;/button&gt;
        &lt;/div&gt;
    &lt;/form&gt;
&lt;/div&gt;</code></pre>
                    </div>
                </section>
            </section>
            <section class="code-box" id="src-components-Button-demo-text">
                <section id="J_vue_stvdtgx0zs" class="code-box-demo">
                    <div>
<div class="box box-success">
    <div class="box-header with-border">
        <h3 class="box-title">Different Height</h3>
    </div>
    <div class="box-body">
        <input class="form-control input-lg" type="text" placeholder=".input-lg">
        <br>
        <input class="form-control" type="text" placeholder="Default input">
        <br>
        <input class="form-control input-sm" type="text" placeholder=".input-sm">
    </div>
</div>
                    </div>
                </section>
                <section class="code-box-meta markdown">
                    <div class="code-box-title"><a href="#src-components-Button-demo-text">不同高度</a></div>
                    <div>
                        <p>
                        </p>
                    </div><span class="collapse anticon anticon-circle-o-right" unselectable="none"></span></section>
                <section class="highlight-wrapper">
                   
                </section>
            </section>
            <section class="code-box" id="src-components-Button-demo-loading">
                <section id="J_vue_c6ii7duz7tf" class="code-box-demo">
                    <div>
<div class="box box-info">
    <div class="box-header with-border">
        <h3 class="box-title">Input Addon</h3>
    </div>
    <div class="box-body">
        <div class="input-group">
            <span class="input-group-addon">@</span>
            <input type="text" class="form-control" placeholder="Username">
        </div>
        <br>
        <div class="input-group">
            <input type="text" class="form-control">
            <span class="input-group-addon">.00</span>
        </div>
        <br>
        <div class="input-group">
            <span class="input-group-addon">$</span>
            <input type="text" class="form-control">
            <span class="input-group-addon">.00</span>
        </div>
        <h4>With icons</h4>
        <div class="input-group">
            <span class="input-group-addon"><i class="fa fa-envelope"></i></span>
            <input type="email" class="form-control" placeholder="Email">
        </div>
        <br>
        <div class="input-group">
            <input type="text" class="form-control">
            <span class="input-group-addon"><i class="fa fa-check"></i></span>
        </div>
        <br>
        <div class="input-group">
            <span class="input-group-addon"><i class="fa fa-dollar"></i></span>
            <input type="text" class="form-control">
            <span class="input-group-addon"><i class="fa fa-ambulance"></i></span>
        </div>
        <h4>With checkbox and radio inputs</h4>
        <div class="row">
            <div class="col-lg-6">
                <div class="input-group">
                    <span class="input-group-addon">
                          <input type="checkbox">
                        </span>
                    <input type="text" class="form-control">
                </div>
                <!-- /input-group -->
            </div>
            <!-- /.col-lg-6 -->
            <div class="col-lg-6">
                <div class="input-group">
                    <span class="input-group-addon">
                          <input type="radio">
                        </span>
                    <input type="text" class="form-control">
                </div>
                <!-- /input-group -->
            </div>
            <!-- /.col-lg-6 -->
        </div>
        <!-- /.row -->
        <h4>With buttons</h4>
        <p class="margin">Large: <code>.input-group.input-group-lg</code></p>
        <div class="input-group input-group-lg">
            <div class="input-group-btn">
                <button type="button" class="btn btn-warning dropdown-toggle" data-toggle="dropdown">Action
                    <span class="fa fa-caret-down"></span></button>
                <ul class="dropdown-menu">
                    <li><a href="#">Action</a></li>
                    <li><a href="#">Another action</a></li>
                    <li><a href="#">Something else here</a></li>
                    <li class="divider"></li>
                    <li><a href="#">Separated link</a></li>
                </ul>
            </div>
            <!-- /btn-group -->
            <input type="text" class="form-control">
        </div>
        <!-- /input-group -->
        <p class="margin">Normal</p>
        <div class="input-group">
            <div class="input-group-btn">
                <button type="button" class="btn btn-danger">Action</button>
            </div>
            <!-- /btn-group -->
            <input type="text" class="form-control">
        </div>
        <!-- /input-group -->
        <p class="margin">Small <code>.input-group.input-group-sm</code></p>
        <div class="input-group input-group-sm">
            <input type="text" class="form-control">
            <span class="input-group-btn">
                      <button type="button" class="btn btn-info btn-flat">Go!</button>
                    </span>
        </div>
        <!-- /input-group -->
    </div>
    <!-- /.box-body -->
</div>
                    </div>
                </section>
                <section class="code-box-meta markdown">
                    <div class="code-box-title"><a href="#src-components-Button-demo-loading">Input Addon</a></div>
                    <div>
                        <p>
                            <!-- react-text: 291 -->Input Addon
                            <!-- /react-text -->
                        </p>
                    </div><span class="collapse anticon anticon-circle-o-right" unselectable="none"></span></section>
                <section class="highlight-wrapper">
                    
                </section>
            </section>
        </div>
        <div class="ant-col-12 code-boxes-col-2-1" style="padding-left: 8px; padding-right: 8px;">
            <section class="code-box" id="src-components-Button-demo-secondary">
                <section id="J_vue_z0xtotnq5o" class="code-box-demo">
                    <div>
<div class="box box-info">
    <div class="box-header with-border">
        <h3 class="box-title">Horizontal Form</h3>
    </div>
    <!-- /.box-header -->
    <!-- form start -->
    <form class="form-horizontal">
        <div class="box-body">
            <div class="form-group">
                <label for="inputEmail3" class="col-sm-2 control-label">Email</label>
                <div class="col-sm-10">
                    <input type="email" class="form-control" id="inputEmail3" placeholder="Email">
                </div>
            </div>
            <div class="form-group">
                <label for="inputPassword3" class="col-sm-2 control-label">Password</label>
                <div class="col-sm-10">
                    <input type="password" class="form-control" id="inputPassword3" placeholder="Password">
                </div>
            </div>
            <div class="form-group">
                <div class="col-sm-offset-2 col-sm-10">
                    <div class="checkbox">
                        <label>
                            <input type="checkbox"> Remember me
                        </label>
                    </div>
                </div>
            </div>
        </div>
        <!-- /.box-body -->
        <div class="box-footer">
            <button type="submit" class="btn btn-default">Cancel</button>
            <button type="submit" class="btn btn-info pull-right">Sign in</button>
        </div>
        <!-- /.box-footer -->
    </form>
</div>
                    </div>
                </section>
                <section class="code-box-meta markdown">
                    <div class="code-box-title">
                        <a href="#src-components-Button-demo-secondary"></a>
                    </div>
                    <div>
                        <p></p>
                    </div>
                    <span class="collapse anticon anticon-circle-o-right" unselectable="none"></span>
                </section>
                <section class="highlight-wrapper highlight-wrapper-expand">
                    <div class="highlight">
                        <pre class="language-xml">
<code>&lt;div class=&quot;box box-info&quot;&gt;
    &lt;div class=&quot;box-header with-border&quot;&gt;
        &lt;h3 class=&quot;box-title&quot;&gt;Horizontal Form&lt;/h3&gt;
    &lt;/div&gt;
    &lt;!-- /.box-header --&gt;
    &lt;!-- form start --&gt;
    &lt;form class=&quot;form-horizontal&quot;&gt;
        &lt;div class=&quot;box-body&quot;&gt;
            &lt;div class=&quot;form-group&quot;&gt;
                &lt;label for=&quot;inputEmail3&quot; class=&quot;col-sm-2 control-label&quot;&gt;Email&lt;/label&gt;
                &lt;div class=&quot;col-sm-10&quot;&gt;
                    &lt;input type=&quot;email&quot; class=&quot;form-control&quot; id=&quot;inputEmail3&quot; placeholder=&quot;Email&quot;&gt;
                &lt;/div&gt;
            &lt;/div&gt;
            &lt;div class=&quot;form-group&quot;&gt;
                &lt;label for=&quot;inputPassword3&quot; class=&quot;col-sm-2 control-label&quot;&gt;Password&lt;/label&gt;
                &lt;div class=&quot;col-sm-10&quot;&gt;
                    &lt;input type=&quot;password&quot; class=&quot;form-control&quot; id=&quot;inputPassword3&quot; placeholder=&quot;Password&quot;&gt;
                &lt;/div&gt;
            &lt;/div&gt;
            &lt;div class=&quot;form-group&quot;&gt;
                &lt;div class=&quot;col-sm-offset-2 col-sm-10&quot;&gt;
                    &lt;div class=&quot;checkbox&quot;&gt;
                        &lt;label&gt;
                            &lt;input type=&quot;checkbox&quot;&gt; Remember me
                        &lt;/label&gt;
                    &lt;/div&gt;
                &lt;/div&gt;
            &lt;/div&gt;
        &lt;/div&gt;
        &lt;!-- /.box-body --&gt;
        &lt;div class=&quot;box-footer&quot;&gt;
            &lt;button type=&quot;submit&quot; class=&quot;btn btn-default&quot;&gt;Cancel&lt;/button&gt;
            &lt;button type=&quot;submit&quot; class=&quot;btn btn-info pull-right&quot;&gt;Sign in&lt;/button&gt;
        &lt;/div&gt;
        &lt;!-- /.box-footer --&gt;
    &lt;/form&gt;
&lt;/div&gt;</code></pre>
                    </div>
                </section>
            </section>
            <section class="code-box" id="src-components-Button-demo-icon">
                <section id="J_vue_ych5ygauws" class="code-box-demo">
                    <div>
<div class="box box-warning">
    <div class="box-header with-border">
        <h3 class="box-title">General Elements</h3>
    </div>
    <!-- /.box-header -->
    <div class="box-body">
        <form role="form">
            <!-- text input -->
            <div class="form-group">
                <label>Text</label>
                <input type="text" class="form-control" placeholder="Enter ...">
            </div>
            <div class="form-group">
                <label>Text Disabled</label>
                <input type="text" class="form-control" placeholder="Enter ..." disabled="">
            </div>
            <!-- textarea -->
            <div class="form-group">
                <label>Textarea</label>
                <textarea class="form-control" rows="3" placeholder="Enter ..."></textarea>
            </div>
            <div class="form-group">
                <label>Textarea Disabled</label>
                <textarea class="form-control" rows="3" placeholder="Enter ..." disabled=""></textarea>
            </div>
            <!-- input states -->
            <div class="form-group has-success">
                <label class="control-label" for="inputSuccess"><i class="fa fa-check"></i> Input with success</label>
                <input type="text" class="form-control" id="inputSuccess" placeholder="Enter ...">
                <span class="help-block">Help block with success</span>
            </div>
            <div class="form-group has-warning">
                <label class="control-label" for="inputWarning"><i class="fa fa-bell-o"></i> Input with warning
                </label>
                <input type="text" class="form-control" id="inputWarning" placeholder="Enter ...">
                <span class="help-block">Help block with warning</span>
            </div>
            <div class="form-group has-error">
                <label class="control-label" for="inputError"><i class="fa fa-times-circle-o"></i> Input with error
                </label>
                <input type="text" class="form-control" id="inputError" placeholder="Enter ...">
                <span class="help-block">Help block with error</span>
            </div>
            <!-- checkbox -->
            <div class="form-group">
                <div class="checkbox">
                    <label>
                        <input type="checkbox"> Checkbox 1
                    </label>
                </div>
                <div class="checkbox">
                    <label>
                        <input type="checkbox"> Checkbox 2
                    </label>
                </div>
                <div class="checkbox">
                    <label>
                        <input type="checkbox" disabled=""> Checkbox disabled
                    </label>
                </div>
            </div>
            <!-- radio -->
            <div class="form-group">
                <div class="radio">
                    <label>
                        <input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked=""> Option one is this and that—be sure to include why it's great
                    </label>
                </div>
                <div class="radio">
                    <label>
                        <input type="radio" name="optionsRadios" id="optionsRadios2" value="option2"> Option two can be something else and selecting it will deselect option one
                    </label>
                </div>
                <div class="radio">
                    <label>
                        <input type="radio" name="optionsRadios" id="optionsRadios3" value="option3" disabled=""> Option three is disabled
                    </label>
                </div>
            </div>
<div class="form-group">
  <label>Select</label>
    <select class="form-control">
        <option>option 1</option>
        <option>option 2</option>
        <option>option 3</option>
        <option>option 4</option>
        <option>option 5</option>
    </select>
</div>
<div class="form-group">
    <label>Select Disabled</label>
    <select class="form-control" disabled="">
        <option>option 1</option>
        <option>option 2</option>
        <option>option 3</option>
        <option>option 4</option>
        <option>option 5</option>
    </select>
</div>
<!-- Select multiple-->
<div class="form-group">
    <label>Select Multiple</label>
    <select multiple="" class="form-control">
        <option>option 1</option>
        <option>option 2</option>
        <option>option 3</option>
        <option>option 4</option>
        <option>option 5</option>
    </select>
</div>
<div class="form-group">
    <label>Select Multiple Disabled</label>
    <select multiple="" class="form-control" disabled="">
        <option>option 1</option>
        <option>option 2</option>
        <option>option 3</option>
        <option>option 4</option>
        <option>option 5</option>
    </select>
</div>
</form>
</div>
<!-- /.box-body -->
</div>
                    </div>
                </section>
                <section class="code-box-meta markdown">
                    <div class="code-box-title"><a href="#src-components-Button-demo-icon">各式表单</a></div>
                    <div>
                        <p>
                        </p>
                    </div><span class="collapse anticon anticon-circle-o-right" unselectable="none"></span></section>
                <section class="highlight-wrapper">
                    
                </section>
            </section>
        </div>
    </div>
</article>